<script setup lang="tsx">
import { computed, ref } from "vue";
import { useElementSize } from "@vueuse/core";
import { ElTreeV2 } from "@chulei-ui/element-plus";

import { useCacheStore } from "../../sde/cache";
import { BLUEPRINTS_GROUP_ID } from "../../sde";
import type { TreeNode } from "@chulei-ui/element-plus";
import UniverseTypeIcon from "~components/universe-type/UniverseTypeIcon.vue";
import UniverseTypePrice from "~components/universe-type/UniverseTypePrice.vue";
const treeRef = ref<InstanceType<typeof ElTreeV2>>();
const target = ref<HTMLElement>();
const { height } = useElementSize(target);
const search = ref<string>();
const cacheStore = useCacheStore();

const treeData = computed(() => {
  return cacheStore.getCategory(BLUEPRINTS_GROUP_ID)!.children.map((g) => {
    return {
      id: g.id,
      label: g.name,
      children: g.children.map((type) => {
        return {
          id: type.id,
          label: type.name,
          leaf: true,
        };
      }),
    };
  });
});

const onSearch = (query: string) => {
  treeRef.value!.filter(query);
};

const filterType = (query: string, node: TreeNode) => {
  //@ts-ignore
  return node.label!.includes(query);
};

defineOptions({
  name: "MarketTree",
});
</script>

<template>
  <div ref="target" class="h-full">
    <el-input v-model="search" placeholder="请输入搜索条件" @input="onSearch" />
    <el-tree-v2 ref="treeRef" :filter-method="filterType" :data="treeData" :height="height - 50">
      <template #default="{ data }">
        <UniverseTypeIcon v-if="data.leaf" :id="data.id" />
        <UniverseTypePrice v-if="data.leaf" :id="data.id" />
        <span v-else>
          {{ data.label }}
        </span>
      </template>
    </el-tree-v2>
  </div>
</template>
